let filter = document.getElementById('fliterInput');

// add event listenner
fliterInput.addEventListener('keyup',fliterNames);

function fliterNames(){
    // 检查以下是否绑定规定成功
    // console.log(1);
    // 获取输入的值
    let fliterValue = document.getElementById("fliterInput").value.toUpperCase();
    // 检查是否获取到input输入框内的内容
    // console.log(fliterValue);

    // 获取ul
    let ul = document.getElementById('names');

    // 获取li
    let li = ul.querySelectorAll('li.collection-item');

    // 遍历item
    for(let i =0;i<li.length;i++){
        // 通过标签查询获取
        // 每次都是第一个
        let a = li[i].getElementsByTagName('a')[0];

        // 判断输入的值是否和通讯录的值匹配
        // indexof可以用来检查一个字符再数组中第一次出现的下标
        // 如果返回-1则代表没有出现，否则会返回大于-1的数
        if (a.innerHTML.toUpperCase().indexOf(fliterValue) > -1){
            li[i].style.display="";
        }
        else{
            li[i].style.display ="none";
        }
    }



}